<template>
  <span
    v-if="value && value != '0'"
    @mouseenter="handleMouseEnter($event)"
    @mouseleave="handleMouseLeave($event)"
  >
    <span>{{ mobileShow(value) }}</span>
    <a-tooltip>
      <template slot="title"> 点击复制 `{{ value }}` </template>
      <a-icon
        v-clipboard:copy="value"
        v-clipboard:success="() => $message.success('内容已复制到剪切板！')"
        v-clipboard:error="() => $message.success('抱歉，复制失败！')"
        class="copy-icon"
        type="copy"
        style="display: none; margin-left: 6px; cursor: pointer;"
      />
    </a-tooltip>
  </span>
</template>

<script>
export default {
  props: {
    value: {
      type: [Number, String],
      default: undefined,
    },
  },
  methods: {
    mobileShow(num) {
      num = num.toString()
      if (num.length < 11) return num
      return (
        num.substring(0, 3) + "-" + num.substring(3, 7) + "-" + num.substring(7)
      )
    },
    handleMouseEnter(e) {
      e.target.querySelector(".copy-icon").style.display = ""
    },
    handleMouseLeave(e) {
      e.target.querySelector(".copy-icon").style.display = "none"
    },
  },
}
</script>

<style lang="less" type="text/less" scoped></style>
